<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <!--    查看container-->
    <style type="text/css">
        /*不同的浏览器展示不同，所以要先清除内外边距*/
        *{
            margin: 0;
            padding: 0;
        }
        /*
        文档流：定位
          1.普通流（标准流、文档流）   块元素独占一行  行内元素水平排列
          2.浮动
          3.定位
        */

        /* 浮动 最开始用来最为文字环绕图片*/
        .float-1{
            width: 400px;
            height: 400px;
            margin: 0 auto;
            border: 1px solid red;
        }
        .float-1 img{
            float: right; /*开始的时候，float是用来做文字浮动效果的*/
        }

        /**
        106:浮动 会脱离标准流的控制 移动到父元素中指定位置；浮动的目的是让块元素在一行展示
        float: left; 默认  没有居中浮动，居中用margin:0 auto;
        float: right;
        float: none;
         */
        .float-2 div{
            width: 100px;
            height: 100px;
            /*display: inline-block; 行内块，可放在一行，但是中间有空白*/
            float: left;
        }
        .float-2 div:nth-child(1){
            background-color: #3c3c3c;
        }
        .float-2 div:nth-child(2){
            background-color: #5c5c5c;
        }

        /**
            只浮动一个：
            第一个浮动起来（浮在标准流的上面），第二个就会占用第一个的位置，
         */
        .float-3 div:nth-child(1){
            background-color: #3c3c3c;
            width: 100px;
            height: 100px;
            float: left; /*浮动*/
        }
        .float-3 div:nth-child(2){
            background-color: red;
            width: 110px;
            height: 110px;
        }

        /**
          防止浮动后，下面的内容往上走，需要给每个浮动的元素设置一个父元素 并设置宽高;
          浮动后不会压住父元素的border和padding
          只有子盒子都浮动才能对齐，并且都浮动时顶部对齐
         */
        .father{
            width: 400px;
            height: 400px;
            background-color: #f6f8fa;
            border: 10px solid red;
            padding: 10px;
        }
        .son1{
            width: 100px;
            height: 100px;
            background-color: #3c3c3c;
            float: right;
        }
        .son2{
            width: 110px;
            height: 110px;
            background-color: #5c3c3c;
            float: right;
        }

        /**
        110：块元素浮动后，具有行内块的特性
        如果不设置宽度，浮动后，宽度和文字一样
         */
        .father2{
            width: 400px;
            height: 400px;
            background-color: #f6f8fa;
            border: 10px solid red;
            padding: 10px;
        }
        .son11{
            height: 100px;
            background-color: #3c3c3c;
            float: left;
        }
        .son22{
            height: 110px;
            background-color: #5c3c3c;
            float: left;
        }
        .son33{ /*行内元素如span，加浮动后也有行内块的特征，可以设置高度，宽度有内容长度决定*/
            background-color: #5c3c3c;
            float: left;
            height: 50px;
        }

        /*
         113 版心 可视区
        */
        .top,.banner,.main,.footer{
            width: 960px;
            text-align: center;
            margin: 0 auto;
            margin-bottom: 10px;
            border: 1px dashed #ccc;
        }
        .top{
            height: 80px;
            background-color: pink;
        }
        .banner{
            height: 120px;
            background-color: purple;
        }
        .main{
            height: 500px;
            background-color: hotpink;
        }
        .footer{
            height: 150px;
            background-color: beige;
        }

        .left{
            height: 500px;
            width: 360px;
            float: left;
            background-color: #f6f8fa;
        }
        .right{
            height: 500px;
            width: 592px;
            float: right;
            background-color: #2e2e2e;
        }




        .top1{
            height: 80px;
            background-color: #000;
        }
        .banner1{
            height: 400px;
            width: 960px;
            background-color: purple;
            margin: 20px auto;
            border-radius: 15px;
        }
        .main1{
            width: 960px;
            height: 240px;  /*如果不设置高度会有什么问题？ 一般父盒子不设置高度*/
            margin: 0 auto;
            background-color: hotpink;
        }
        .footer1{
            height: 50px;
            background-color: beige;
        }
        .ul1 li{
            list-style: none;
            height: 240px;
            width: 240px;
            float: left;
            background-color: #a6f8fa;
        }
        .ul1 li:nth-child(even){
            background-color: #f6f8fa;
        }



        /*
        116 清除浮动：清除浮动造成的影响
            父盒子不设高度，子元素都浮动，会有影响，处理如何？

            清除浮动的本质是闭合浮动，让父盒子闭合出口和入口不让他们出来影响其他元素

            clear： left,right,both;一般使用both


            清除浮动的三种形式：
                1.额外标签法：在最后一个浮动元素后加一个空标签；w3c推荐，但是结构差，每次都会新增一个标签，不建议用
                    <div>
                        <div>float1</div>
                        <div>float1</div>
                        <div>float1</div>
                        <div style="clear:both"></div> 空标签
                    </div>
                    <div></div>
                2.父级元素添加overflow:hidden,可以触发BFC，内容增多时会造成不自动换行导致的内容隐藏
                3.使用伪元素::after,但是通常为了兼容旧的浏览器只用一个:after
                    在父元素上添加class="clearfix"
                       .clearfix:after{
                            content:".";  内容为小点或其他内容，最好不为空；否则旧版浏览器有空隙
                            display:block; 转换为块元素
                            height: 0; 高度为0；
                            visibility：hidden; 隐藏盒子及内容
                            clear:both 清除浮动
                       }
                       .clearfix{   ie6/7的处理方式
                            *zoom:1;  *是ie6/7能识别的特殊符号，带有*的属性只有ie6/7才能执行  zoom就是ie6/7清除浮动的方法
                       }
                 4.使用before和after双伪元素清除浮动
                       .clearfix:before, .clearfix:after{
                              content: "";
                              display:table ; 这句话可以触发BFC，BFC可以清除浮动
                       }
                       .clearfix:after{
                              clear:both ;
                       }
                       .clearfix{
                              *zoom:1;
                       }

        */


    </style>
</head>


<body>
<div class="float-1">
德市委书记、石供述自己的罪行，构成自首。
        <img src="../img/ww.png" />
，这些物品都是他过去收受的一些涉案款物和其他的礼品、礼金。他逐一地把这些物品都一件件交到我们手上，然后摆在桌上的时候，大概占据了桌子的有一半以上。”
 央纪委国家监委投案，并如实供述自己的罪行，构成自首。
    </div>

    <div class="float-2">
        <div></div>
        <div></div>
    </div>

    <br><br><br><br><br><br><br>

    <div class="float-3">
        <div>a</div>
        <div>b</div>
    </div>

    <br><br>

    <div class="father">
        <div class="son1">1</div>
        <div class="son2">2</div>
    </div>

    <div class="father2">
        <div class="son11">到时到时多</div>
        <div class="son22">颠三倒四</div>
        <span>ddddddddd</span>
        <span>333333</span>
        <span class="son33">4444444</span>
    </div>

    <br/><br/>布局一：一列固定宽度居中布局

    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="main">main</div>
    <div class="footer">footer</div>

    <br/><br/>布局二：两列左窄右宽型

        <div class="top">top</div>
        <div class="banner">banner</div>
        <div class="main">
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
        <div class="footer">footer</div>

    <br/><br/>布局三：通栏平均分布型

        <div class="top1">top</div>
        <div class="banner1">banner</div>
        <div class="main1">
            <ul class="ul1">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>
        <div class="footer1">footer</div>


</body>

</html>
